<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>溯源码扫码查询</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.scan-container {
			padding: 20px;
			max-width: 1000px;
			margin: 0 auto;
		}
		.scan-panel {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 30px;
			margin-bottom: 30px;
			text-align: center;
		}
		.scan-title {
			font-size: 24px;
			font-weight: 600;
			color: #333;
			margin-bottom: 15px;
		}
		.scan-subtitle {
			color: #666;
			margin-bottom: 30px;
		}
		.scan-methods {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
			margin-bottom: 30px;
		}
		.scan-method {
			border: 2px dashed #e9ecef;
			border-radius: 12px;
			padding: 30px 20px;
			cursor: pointer;
			transition: all 0.3s;
		}
		.scan-method:hover {
			border-color: #409eff;
			background: #f0f9ff;
		}
		.scan-method.active {
			border-color: #409eff;
			background: #f0f9ff;
			border-style: solid;
		}
		.method-icon {
			width: 60px;
			height: 60px;
			background: #409eff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 15px;
			color: white;
			font-size: 24px;
		}
		.method-title {
			font-size: 16px;
			font-weight: 600;
			color: #333;
			margin-bottom: 8px;
		}
		.method-desc {
			font-size: 14px;
			color: #666;
		}
		.camera-container {
			position: relative;
			width: 300px;
			height: 300px;
			margin: 0 auto;
			border: 2px solid #e9ecef;
			border-radius: 12px;
			overflow: hidden;
			background: #f8f9fa;
		}
		.camera-placeholder {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #999;
		}
		.scan-frame {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 200px;
			height: 200px;
			border: 2px solid #409eff;
			border-radius: 8px;
		}
		.scan-frame::before,
		.scan-frame::after {
			content: '';
			position: absolute;
			width: 20px;
			height: 20px;
			border: 3px solid #409eff;
		}
		.scan-frame::before {
			top: -3px;
			left: -3px;
			border-right: none;
			border-bottom: none;
		}
		.scan-frame::after {
			bottom: -3px;
			right: -3px;
			border-left: none;
			border-top: none;
		}
		.manual-input {
			max-width: 400px;
			margin: 0 auto;
		}
		.input-group {
			display: flex;
			gap: 10px;
		}
		.result-panel {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 30px;
			margin-bottom: 30px;
		}
		.result-header {
			background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
			color: white;
			padding: 20px;
			border-radius: 8px;
			margin-bottom: 25px;
			display: flex;
			align-items: center;
			gap: 15px;
		}
		.result-icon {
			width: 50px;
			height: 50px;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
		}
		.product-card {
			display: flex;
			gap: 20px;
			margin-bottom: 25px;
			padding: 20px;
			background: #f8f9fa;
			border-radius: 8px;
		}
		.product-image {
			width: 120px;
			height: 120px;
			border-radius: 8px;
			object-fit: cover;
		}
		.product-details {
			flex: 1;
		}
		.product-name {
			font-size: 20px;
			font-weight: 600;
			color: #333;
			margin-bottom: 10px;
		}
		.product-info {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 15px;
		}
		.info-item {
			display: flex;
			justify-content: space-between;
			padding: 8px 0;
			border-bottom: 1px solid #e9ecef;
		}
		.info-label {
			color: #666;
			font-weight: 500;
		}
		.info-value {
			color: #333;
			font-weight: 600;
		}
		.quick-actions {
			display: flex;
			gap: 15px;
			margin-top: 20px;
			justify-content: center;
		}
		.action-btn {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 10px 20px;
			border-radius: 8px;
			text-decoration: none;
			transition: all 0.2s;
		}
		.action-primary {
			background: #409eff;
			color: white;
		}
		.action-primary:hover {
			background: #337ecc;
			color: white;
		}
		.action-secondary {
			background: #f0f0f0;
			color: #333;
		}
		.action-secondary:hover {
			background: #e0e0e0;
		}
		.scan-tips {
			background: #f0f9ff;
			border-left: 4px solid #409eff;
			padding: 15px 20px;
			margin-top: 20px;
			border-radius: 4px;
		}
		.tips-title {
			font-weight: 600;
			color: #333;
			margin-bottom: 8px;
		}
		.tips-list {
			color: #666;
			font-size: 14px;
			line-height: 1.6;
		}
		.tips-list li {
			margin-bottom: 5px;
		}
		.no-result {
			text-align: center;
			padding: 40px 20px;
			color: #999;
		}
		.scanning-animation {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 2px;
			background: linear-gradient(90deg, transparent, #409eff, transparent);
			animation: scanning 2s infinite;
		}
		@keyframes scanning {
			0% { transform: translateX(-100%); }
			100% { transform: translateX(300px); }
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="scan-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>溯源码扫码查询</h2>
				<p>一物一码，扫码即可查看商品完整溯源信息</p>
			</div>

			<!-- 扫码面板 -->
			<div class="scan-panel">
				<div class="scan-title">选择查询方式</div>
				<div class="scan-subtitle">支持摄像头扫码或手动输入溯源码</div>
				
				<div class="scan-methods">
					<div :class="['scan-method', {active: scanMode === 'camera'}]" @click="setScanMode('camera')">
						<div class="method-icon">
							<i class="el-icon-camera"></i>
						</div>
						<div class="method-title">摄像头扫码</div>
						<div class="method-desc">使用摄像头扫描二维码</div>
					</div>
					<div :class="['scan-method', {active: scanMode === 'manual'}]" @click="setScanMode('manual')">
						<div class="method-icon">
							<i class="el-icon-edit"></i>
						</div>
						<div class="method-title">手动输入</div>
						<div class="method-desc">手动输入溯源码查询</div>
					</div>
					<div :class="['scan-method', {active: scanMode === 'upload'}]" @click="setScanMode('upload')">
						<div class="method-icon">
							<i class="el-icon-upload"></i>
						</div>
						<div class="method-title">上传图片</div>
						<div class="method-desc">上传二维码图片识别</div>
					</div>
				</div>

				<!-- 摄像头扫码 -->
				<div v-if="scanMode === 'camera'">
					<div class="camera-container">
						<div class="camera-placeholder" v-if="!cameraActive">
							<i class="el-icon-video-camera" style="font-size: 48px; margin-bottom: 15px;"></i>
							<p>点击下方按钮开启摄像头</p>
						</div>
						<div v-else style="position: relative; width: 100%; height: 100%;">
							<div class="scan-frame">
								<div class="scanning-animation" v-if="scanning"></div>
							</div>
						</div>
					</div>
					<div style="margin-top: 20px;">
						<el-button v-if="!cameraActive" type="primary" @click="startCamera" :loading="startingCamera">
							<i class="el-icon-video-camera"></i> 开启摄像头
						</el-button>
						<div v-else>
							<el-button type="danger" @click="stopCamera">
								<i class="el-icon-video-pause"></i> 停止扫码
							</el-button>
							<el-button type="primary" @click="manualScan" style="margin-left: 10px;">
								<i class="el-icon-search"></i> 手动触发识别
							</el-button>
						</div>
					</div>
				</div>

				<!-- 手动输入 -->
				<div v-if="scanMode === 'manual'" class="manual-input">
					<div class="input-group">
						<el-input
							v-model="manualCode"
							placeholder="请输入溯源码，如：YN202312200001"
							size="large"
							@keyup.enter.native="queryByCode">
							<template slot="prepend">溯源码</template>
						</el-input>
						<el-button type="primary" size="large" @click="queryByCode" :loading="querying">
							<i class="el-icon-search"></i> 查询
						</el-button>
					</div>
				</div>

				<!-- 上传图片 -->
				<div v-if="scanMode === 'upload'">
					<el-upload
						class="upload-demo"
						drag
						:action="uploadAction"
						:on-success="handleUploadSuccess"
						:before-upload="beforeUpload"
						accept="image/*"
						:limit="1">
						<i class="el-icon-upload" style="font-size: 48px; color: #409eff;"></i>
						<div style="margin-top: 15px;">
							<p>将二维码图片拖拽到此处，或<em>点击上传</em></p>
							<p style="color: #999; font-size: 12px;">支持 jpg、png 格式，文件大小不超过 5MB</p>
						</div>
					</el-upload>
				</div>

				<!-- 扫码提示 -->
				<div class="scan-tips">
					<div class="tips-title">扫码提示：</div>
					<ul class="tips-list">
						<li>请将二维码完整置于扫描框内</li>
						<li>保持手机稳定，避免抖动</li>
						<li>确保光线充足，避免反光</li>
						<li>如扫码失败，可尝试手动输入溯源码</li>
					</ul>
				</div>
			</div>

			<!-- 查询结果 -->
			<div v-if="queryResult" class="result-panel">
				<div class="result-header">
					<div class="result-icon">
						<i class="el-icon-success"></i>
					</div>
					<div>
						<h3 style="margin: 0 0 5px 0;">查询成功</h3>
						<p style="margin: 0; opacity: 0.9;">溯源码：{{queryResult.traceCode}}</p>
					</div>
				</div>

				<div class="product-card">
					<img :src="queryResult.product.image" :alt="queryResult.product.name" class="product-image">
					<div class="product-details">
						<div class="product-name">{{queryResult.product.name}}</div>
						<div class="product-info">
							<div class="info-item">
								<span class="info-label">品牌</span>
								<span class="info-value">{{queryResult.product.brand}}</span>
							</div>
							<div class="info-item">
								<span class="info-label">产地</span>
								<span class="info-value">{{queryResult.product.origin}}</span>
							</div>
							<div class="info-item">
								<span class="info-label">生产日期</span>
								<span class="info-value">{{queryResult.product.productionDate}}</span>
							</div>
							<div class="info-item">
								<span class="info-label">保质期</span>
								<span class="info-value">{{queryResult.product.shelfLife}}</span>
							</div>
							<div class="info-item">
								<span class="info-label">批次号</span>
								<span class="info-value">{{queryResult.product.batchNo}}</span>
							</div>
							<div class="info-item">
								<span class="info-label">质量等级</span>
								<span class="info-value">{{queryResult.product.quality}}</span>
							</div>
						</div>
					</div>
				</div>

				<div class="quick-actions">
					<a href="javascript:void(0)" class="action-btn action-primary" @click="viewFullTrace">
						<i class="el-icon-connection"></i>
						查看完整溯源
					</a>
					<a href="javascript:void(0)" class="action-btn action-secondary" @click="downloadCertificate">
						<i class="el-icon-download"></i>
						下载证书
					</a>
					<a href="javascript:void(0)" class="action-btn action-secondary" @click="shareResult">
						<i class="el-icon-share"></i>
						分享结果
					</a>
				</div>
			</div>

			<!-- 无结果状态 -->
			<div v-if="noResult" class="result-panel">
				<div class="no-result">
					<i class="el-icon-warning" style="font-size: 48px; color: #f56c6c; margin-bottom: 15px;"></i>
					<h3>未找到相关信息</h3>
					<p>请检查溯源码是否正确，或联系客服人员</p>
					<el-button type="primary" @click="resetQuery">重新查询</el-button>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					scanMode: 'camera',
					cameraActive: false,
					startingCamera: false,
					scanning: false,
					manualCode: '',
					querying: false,
					uploadAction: '/api/upload-qr', // 上传接口地址
					queryResult: null,
					noResult: false
				}
			},
			methods: {
				setScanMode(mode) {
					this.scanMode = mode;
					this.resetQuery();
				},
				
				startCamera() {
					this.startingCamera = true;
					// 模拟开启摄像头
					setTimeout(() => {
						this.cameraActive = true;
						this.startingCamera = false;
						this.scanning = true;
						this.$message.success('摄像头已开启，请将二维码对准扫描框');
						
						// 模拟自动识别
						setTimeout(() => {
							this.mockScanResult('YN202312200001');
						}, 3000);
					}, 1000);
				},
				
				stopCamera() {
					this.cameraActive = false;
					this.scanning = false;
					this.$message.info('已停止扫码');
				},
				
				manualScan() {
					this.$message.info('手动触发识别...');
					setTimeout(() => {
						this.mockScanResult('YN202312200001');
					}, 1000);
				},
				
				queryByCode() {
					if (!this.manualCode.trim()) {
						this.$message.warning('请输入溯源码');
						return;
					}
					
					this.querying = true;
					setTimeout(() => {
						this.querying = false;
						if (this.manualCode === 'YN202312200001') {
							this.mockScanResult(this.manualCode);
						} else {
							this.showNoResult();
						}
					}, 1500);
				},
				
				beforeUpload(file) {
					const isImage = file.type.startsWith('image/');
					const isLt5M = file.size / 1024 / 1024 < 5;
					
					if (!isImage) {
						this.$message.error('只能上传图片文件');
						return false;
					}
					if (!isLt5M) {
						this.$message.error('图片大小不能超过 5MB');
						return false;
					}
					return true;
				},
				
				handleUploadSuccess(response, file, fileList) {
					this.$message.success('图片上传成功，正在识别...');
					setTimeout(() => {
						this.mockScanResult('YN202312200001');
					}, 2000);
				},
				
				mockScanResult(code) {
					this.scanning = false;
					this.queryResult = {
						traceCode: code,
						product: {
							name: '有机小白菜',
							brand: '绿色农场',
							image: 'https://via.placeholder.com/120x120/4CAF50/FFFFFF?text=有机小白菜',
							origin: '山东寿光有机农场',
							productionDate: '2023-12-20',
							shelfLife: '7天',
							batchNo: 'YN202312200001',
							quality: 'A级优质'
						}
					};
					this.noResult = false;
					this.$message.success('溯源信息查询成功！');
				},
				
				showNoResult() {
					this.queryResult = null;
					this.noResult = true;
					this.$message.error('未找到相关溯源信息');
				},
				
				resetQuery() {
					this.queryResult = null;
					this.noResult = false;
					this.manualCode = '';
					this.stopCamera();
				},
				
				viewFullTrace() {
					this.$message.info('跳转到完整溯源页面');
					// 实际应用中会跳转到溯源节点展示页面
				},
				
				downloadCertificate() {
					this.$message.success('证书下载中...');
					// 实际应用中会下载相关证书文件
				},
				
				shareResult() {
					this.$message.info('分享溯源结果');
					// 实际应用中会打开分享弹窗
				}
			}
		});
	</script>
</body>
</html>